﻿
@{
    Layout = null;
}

<table id="user" class="easyui-datagrid" style="width:100%;height:100%"
       url="/Data/GetAllUser"
       title="用户管理" iconcls="icon-save" fitcolumns="true" sortname="CreateTime" sortorder="desc"
       pagination="true"
       idfield="Id"
       fit="true"
       noheader="true"
       striped="true"
       singleselect="true"
       checkonselect="false"
       nowrap="true"
       loadmsg='正在加载……'
       rownumbers="true"
       frozencolumns="[[{ field:'ck'  checkbox:false }]]"
       toolbar="#tbUser">
    <thead>
        <tr>
            <th field="Id" width="10" align="center">标识</th>
            <th field="NickName" width="100" align="center">昵称</th>
            <th field="Account" width="100" align="center">用户名</th>
            <th field="Role" width="100" align="center" formatter="getUser">角色</th>
            <th field="CreateTime" width="100" align="center" formatter="formatTime">创建时间</th>
        </tr>
    </thead>
</table>
<div id="tbUser">
    <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="javascript:AddUser()">添加</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-cut" plain="true" onclick="javascript: UpdateUser()">修改</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" plain="true" onclick="javascript: DeleteUser()">删除</a>
</div>

<div id="AddUser" class="easyui-dialog" title="添加用户" style="width:400px;height:400px;padding:10px" buttons="#user-dlg-buttons" data-options="iconCls:'icon-add',resizable:true,modal:true,closed:true">
    <div class="easyui-panel" data-options="fit:true,border:false">
        <form id="addUserForm" method="post" action="/Data/AddUser">
            <input type="hidden" name="Id" id="user_Id" />
            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Account" id="Account" label="用户名:" labelPosition="top" style="width:80%;">
            </div>

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="NickName" id="NickName" label="昵称:" labelPosition="top" style="width:80%;">
            </div>

            <div style="margin-bottom:15px">
                <input class="easyui-textbox" name="Password" id="Password" label="密码:" labelPosition="top" style="width:80%;">
            </div>
            <div style="margin-bottom:15px">
                <label>角色:</label><br /><br />
                <select name="Role" id="Role" class="easyui-combobox" style="width:50%" data-options="multiple:false,editable: false">
                    <option value="user" selected="selected">普通用户</option>
                    <option value="admin">管理员</option>
                </select>
            </div>

        </form>
    </div>
</div>
<div id="user-dlg-buttons">
    <table cellpadding="0" cellspacing="0" style="width:100%">
        <tr>
            <td>
                @*<img src="email.gif" />*@
            </td>
            <td style="text-align:right">
                <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="javascript:SaveUser()">保存</a>
                <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript: $('#AddUser').dialog('close')">取消</a>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    function getUser(value, row, index) {
        if (value) {
            if (value == "user") {
                return "普通用户";
            }
            return "管理员";
        }
    }
    function AddUser() {
        user_clear();
        $("#AddUser").dialog({ title: "添加用户" });
        $("#AddUser").dialog('open');
    }
    function SaveUser() {
        $("#addUserForm").form('submit', {
            success: function (data) {
                //data = eval("(" + data + ")");
                console.log(data)
                if (data) {
                    $("#AddUser").dialog('close');
                    if ($("#user_Id").val() > 0)//ID存在
                    {
                        topCenter("修改用户", "修改成功!");
                    }
                    else {
                        topCenter("添加用户", "添加成功!");
                    }
                    $("#user").datagrid('reload');
                }
                else {
                    if ($("#user_Id").val() > 0)//ID存在
                    {
                        topCenter("修改用户", "修改失败!");
                    }
                    else {
                        topCenter("添加用户", "添加失败!");
                    }
                }

            }
        })
    }

    function UpdateUser() {
        user_clear();
        var row = $("#user").datagrid("getSelected");
        if (row == null) {
            topCenter("提示", "请选择要修改的数据!");
            return;
        }
        $("#user_Id").val(row.Id);
        $("#Account").textbox('setValue', row.Account);
        $("#NickName").textbox("setValue", row.NickName);
        $("#Password").textbox("setValue", row.Password);
        $("#Role").combobox('setValue', row.Role);
        $("#AddUser").dialog({ title: "修改用户" });
        $("#AddUser").dialog('open');
    }

    function DeleteUser() {
        var row = $("#user").datagrid("getSelected");
        if (row == null) {
            topCenter("提示", "请选择要删除的数据!");
            return;
        }
        $.post('/Data/DeleteUser', { Id: row.Id }, function (data) {
            if (data) {
                topCenter("提示", "删除成功!");
                $("#user").datagrid('reload');
            } else {
                topCenter("提示", "删除失败!");
            }
        });
    }

    function user_clear() {
        $("#user_Id").val("");
        $("#Account").textbox("setValue", "");
        $("#NickName").textbox("setValue", "");
        $("#Password").textbox("setValue", "");
    }
</script>
